<template>
  <a-card :bordered="false">
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="文件名" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="queryParam.name" placeholder="请输入文件名" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="文件类型" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select placeholder="请输入文件类型">
                <a-select-option value="1">
                  任意文件
                </a-select-option>
                <a-select-option value="2">
                  文件夹
                </a-select-option>
                <a-select-option value="3" >
                  文档
                </a-select-option>
                <a-select-option value="4">
                  图片
                </a-select-option>
                <a-select-option value="5">
                  音乐
                </a-select-option>
                <a-select-option value="6">
                  视频
                </a-select-option>
                <a-select-option value="7">
                  压缩包
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" icon="search" @click="searchQuery()">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset()">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row :gutter="10">
      <a-col :md="5" >
        <a-card size="small" :bodyStyle="{'overflow-y': 'auto'}">
          <a-tree
            :style="{height:height+'px'}"
            show-line
            :default-expanded-keys="['1', '2']"
            :treeData="treeData"
            @select="onSelectTree"
            :replaceFields="replaceFields"
            :height="height"
            :default-selected-keys="['1']"
          >
            <template #title="{value,name,dataRef:treeData}">
              <a-dropdown :trigger="['contextmenu']">
                <span >
                  <a-icon  v-if="treeData.icon" :type="treeData.icon" />
                  {{ name }}
                </span>
                <template #overlay>
                  <a-menu @click="({ key: menuKey }) => onContextMenuClick(value,menuKey,treeData)">
                    <a-menu-item v-hasPermi="auth.permi.groupAdd" key="1">
                      <a-icon type="sync" class="mr-2 text-xl"/>
                      刷新
                    </a-menu-item>
                    <a-menu-item v-hasPermi="auth.permi.groupAdd" key="2">
                      <a-icon type="folder-open" class="mr-2 text-xl"/>
                      打开
                      </a-menu-item>
                    <a-menu-item v-hasPermi="auth.permi.groupEdit" key="3">
                      <a-icon type="info-circle" class="mr-2 text-xl"/>
                      属性
                      </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-tree>
        </a-card>
      </a-col>
      <a-col :md="19" >
        <vxe-grid
          id="FileList"
          ref="vxeTable"
          :height="height"
          v-bind="gridOptions"
          :tree-config="{ childrenField:'children',rowField: 'value'}"
          :data="dataSource"
          :menuConfig =" {
            body: {
              options: [
                [
                  { code: 'open', name: '打开', prefixIcon: 'vxe-icon-folder-open' },
                  { code: 'upload', name: '下载', prefixIcon: 'vxe-icon-cloud-upload' },
                  { code: 'copy', name: '复制', prefixIcon: 'vxe-icon-copy' },
                  { code: 'paste', name: '剪切', prefixIcon: 'vxe-icon-paste' },
                  { code: 'edit', name: '重命名' , prefixIcon: 'vxe-icon-edit'},
                  { code: 'delete', name: '删除' , prefixIcon: 'vxe-icon-delete-fill'},
                  { code: '1', name: '升版' , prefixIcon: 'vxe-icon-send-fill'},
                  { code: 'info', name: '属性', prefixIcon: 'vxe-icon-warning-circle' }
                ]
              ]
            }
          } "
           @menu-click="contextMenuClickEvent"
        >
        </vxe-grid>
      </a-col>
    </a-row>
    <FileInfoModal ref="FileInfoModal" />
    <FileModal @ok="modalFormOk" ref="modalForm" />
  </a-card>
</template>

<script>
import { Tree as ATree } from 'ant-design-vue'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import FileInfoModal from './modules/FileInfoModal'
import FileModal from './modules/FileModal'
export default {
  name: 'MaterialList',
  mixins: [VxeTableListMixin],
  components: {
    ATree,
    FileInfoModal,
    FileModal
  },
  data() {
    return {
      treeData: [
        { name: '位置', value: '1', children: [
          { name: '收藏夹', value: '1-1', type: '文件夹', size: '0KB', icon: 'star', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
          { name: '个人空间', value: '1-2', type: '文件夹', size: '12MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', icon: 'home', children: [
            { name: '私密保险箱', type: '文件夹', value: '1-2-1', size: '238B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '我的文档', type: '文件夹', value: '1-2-2', size: '8.1MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '桌面', type: '文件夹', value: '1-2-3', size: '466B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '4.jpg', code: '002', type: 'jpg', value: '1-2-4', size: '238B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '7.jpg', code: '001', type: 'jpg', value: '1-2-5', size: '2.1MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '探析中小企业会计准则的适用范围界定.pdf', code: '003', type: 'pdf', value: '1-2-3', size: '2MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' }
          ] },
          { name: '企业网盘', type: '文件夹', value: '1-3', size: '0KB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', icon: 'cloud-download', children: [
            { name: '1图片文件', type: '文件夹', value: '1-3-1', size: '238B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', children: [
              { name: '4.jpg', type: 'jpg', code: '004', value: '1-3-1-1', size: '238B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
              { name: '7.jpg', type: 'jpg', code: '005', value: '1-3-1-2', size: '2.1MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' }
            ] },
            { name: '2视频资料', type: '文件夹', value: '1-3-2', size: '8.1MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '3办公文档', type: '文件夹', value: '1-3-3', size: '466B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' },
            { name: '4设计文档', type: 'jpg', code: '006', value: '1-3-4', size: '238B', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员' }
          ] },
          { name: '与我协作', type: '文件夹', value: '1-4', size: '0KB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', icon: 'deployment-unit' }
        ] },
        { name: '工具', value: '2', type: '文件夹', size: '19MB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', children: [
          { name: '我的协作', type: '文件夹', value: '2-2', size: '0KB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', created: '管理员', icon: 'branches' },
          { name: '外链分享', type: '文件夹', value: '2-3', size: '0KB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', icon: 'read' },
          { name: '我的相册', type: '文件夹', value: '2-4', size: '0KB', updateTime: '2023-10-05 14:26', createdTime: '2023-10-03 14:26', update: '管理员', created: '管理员', icon: 'picture' }
        ] }
      ],
      url: {
        list: '/erp/common/item/page',
        delete: '/erp/common/item/remove/',
        deleteBatch: '/erp/common/item/remove/',
        config: '/erp/common/res/list/Item'
      },
      currentTree: '',
      columns: [
        { title: '名称', field: 'name', treeNode: true, width: 250 },
        { title: '编码', field: 'code', width: 100 },
        { title: '类型', field: 'type' },
        { title: '大小', field: 'size' },
        { title: '修改时间', field: 'updateTime', formatter: 'dictText' },
        { title: '修改者', field: 'update', formatter: 'dictText' },
        { title: '创建时间', field: 'created' }
      ],
      toolbarConfig: {
        export: false,
        import: false,
        buttons: [
          { buttonRender: { name: 'VxeToolbarAdd', events: { click: this.handleAdd }, disabled: this.disableSubmit }}
        ]
      },
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'value'
      },
      dataSource: [],
      disabledProxy: true
    }
  },
  methods: {
    onSelectTree(selectedKeys, e) { // 选中物料类别
      this.dataSource = e.node.dataRef.children || []
      console.log(e)
    },
    contextMenuClickEvent({ menu, row, column }) {
      console.log(row)
      if (menu.code === 'info') {
        console.log('----')
        this.$refs.FileInfoModal.show(row)
      }
    }
  },
  mounted() {
    this.dataSource = this.treeData[0].children
  }
}
</script>
